.doc > section.expression {
	flex: 0 $title-height+$input-height;
	
	> header {
		background: $theme-color;
	}
	
	> .editor {
		position: relative;
		
		.icon.alert {
			display: none;
			position: relative;
			float: right;
			margin: $pad * 1.25;
			color: $error-color;
			z-index: 10;
			user-select: none;
		}
		
		> .CodeMirror {
			padding: $pad 0 0 $pad;
			font-weight: bold;
		}
	}
	
	> .editor.error > .icon.alert {
		display: block;
	}
}

// tooltips:
#tooltip-flavor, #tooltip-flags {
	> .list {
		li {
			cursor: pointer;
			color: $doc-light;

			&:hover {
				color: $doc-white;
			}
			
			+ li {
				margin-top: 0.5em;
			}
			
			.check.icon {
				color: $doc-dark; 
				margin-right: 0.25em;
			}
			
			&.selected .check.icon {
				color: $theme-color;
			}
			
			em {
				font-style: normal;
				font-weight: bold;
				color: $doc-white;
				padding: 0 0.15em;
				background: rgba($doc-mid, 0.3);
				border-radius: $control-radius;
			}
		}
	}
}



/* Syntax highlighting */

.exp-related {
	border-bottom: $related-stroke;
	border-top: $related-stroke;
	margin-bottom: -$related-stroke-width;
	margin-top: -$related-stroke-width;
}

.exp-related-left {
	border-left: $related-stroke;
	margin-left: -$related-stroke-width;
}

.exp-related-right {
	border-right: $related-stroke;
	margin-right: -$related-stroke-width;
}

.exp-selected {
	border-top: $selected-stroke;
	border-bottom: $selected-stroke;
}

.exp-selected-left {
	border-left: $selected-stroke;
	margin-left: -$selected-stroke-width;
}

.exp-selected-right {
	border-right: $selected-stroke;
	margin-right: -$selected-stroke-width;
}

.exp-error {
	border-bottom: solid 2px $error-color;
}

.exp-warning {
	border-bottom: dotted 2px $warning-color;
}

.exp-char {
	color: $doc-black;
}

.exp-decorator {
	color: $doc-light;
}

.exp-esc {
	color: $esc-color;
}

.exp-quant, .exp-lazy, .exp-possessive {
	color: $quant-color;
}

.exp-alt {
	color: $alt-color;
}

.exp-anchor {
	color: $anchor-color;
}

.exp-group, .exp-ref, .exp-lookaround {
	color: $group-color;
}

.exp-charclass, .exp-set, .exp-subst {
	color: $set-color;
}

.exp-group-0 { background: rgba($groupbg-color, 0.11); }

.exp-group-1 { background: rgba($groupbg-color, 0.22); }

.exp-group-2 { background: rgba($groupbg-color, 0.33); }

.exp-group-3 { background: rgba($groupbg-color, 0.44); }

.exp-group-set { background: rgba($setbg-color, 0.3); }

.exp-comment {
	color: $doc-light;
	background: rgba($doc-black, 0.05);
	font-style: italic;
	border-bottom: solid 3px $doc-lighter;
}

.exp-special { color: $special-color; }
